<template>
    <!-- 按钮开始 -->
    <div class="shuffling">
        <el-button @click="showHandler" size="small" type="primary">新增</el-button>
        <el-button size="small" type="primary">预览</el-button>
        <!-- 按钮结束 -->
        <!-- 表格开始 -->
            <template>
                <el-table
                    :data="shufflings"
                    style="width: 100%">
                    <el-table-column
                    prop="id"
                    label="序号"
                    width="90"
                    align='center'>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="轮播图名称"
                    width="100"
                    align='center'>
                    </el-table-column>
                    <el-table-column
                    prop="introduce"
                    label="轮播图描述"
                    align='center'>
                    </el-table-column>
                    <el-table-column
                    prop="url"
                    label="轮播图图片"
                    align='center'>
                    </el-table-column>
                    <el-table-column
                    prop="status"
                    label="状态"
                    align='center'>
                    </el-table-column>
                    <el-table-column label="操作" align='center'>
                        <template slot-scope="scope">
                            <el-button size='mini' type='primary'>编辑</el-button>
                            <el-button size='mini' type='danger'>删除</el-button>
                            <el-button size='mini' type='primary'>停用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </template>
        <!-- 表格结束 -->
        <!-- 分页开始 -->
        <div class="pagination">
            <el-pagination
                layout="prev, pager, next"
                :page-size="list.pageSize"
                
                @current-change='changeHandler'>
            </el-pagination>
        </div>
        <!-- 分页结束 -->
        <!-- 模态框开始 -->
        <!-- 新增开始 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="轮播图片" prop="name">
            <el-input v-model="ruleForm.url"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="name">
            <el-input type="textarea" v-model="ruleForm.introduce"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size='mini' @click="dialogFormVisible = false">取 消</el-button>
          <el-button size='mini' type="primary" @click="submitHandler">确 定</el-button>
        </div>
      </el-dialog>
        <!-- 新增结束 -->
        <!-- 预览开始 -->
        <el-dialog :topic="preview" :visible.sync="dialogVisible">
        <template>
            <div class="block">
                <span class="demonstration"></span>
                <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="item in 4" :key="item">
                    <h3 class="small">{{ url }}</h3>
                </el-carousel-item>
                </el-carousel>
            </div>
        </template>
        </el-dialog>
        <!-- 预览结束 -->
        <!-- 模态框结束 -->
  </div>
</template>
<!-- <script>
import {get} from '../../utils/request'
export default {
    data() {
      return {
        shufflings: [
        //     {
        //     date: '2016-05-02',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1518 弄'
        //   }, {
        //     date: '2016-05-04',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1517 弄'
        //   }, {
        //     date: '2016-05-01',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1519 弄'
        //   }, {
        //     date: '2016-05-03',
        //     name: '王小虎',
        //     address: '上海市普陀区金沙江路 1516 弄'
        //   }
        ],
        list:{
            page:1,
            pageSize:3
        },
        total:0,
        dialogFormVisible:false
      }
    },
    methods:{
        // 查询所有轮播信息
        findAllShuffling(){
            // 异步操作
            get('/carousel/findAll',this.list).then(res=>{
                console.log(res.data);
                if (res.status === 200) {
                    this.shufflings = res.data.list
                    this.total = res.data.total
                }else{
                    this.$message({
                        type:'error',
                        message:res.message
                    })
                }
            })
        },
        // 分页
        changeHandler(page){
            // console.log(999);
            this.list.page = page
            this.findAllShuffling(this.list)
    },
    },
    created(){
        this.findAllShuffling()
    }
  }
</script> -->
<script>
import {mapState,mapActions} from 'vuex'
export default {
  data(){
    return {
      list:{
        page:1,
        pageSize:3
      },
      dialogFormVisible:false,
      dialogVisible:false,
      ruleForm:{},
      title:'新增轮播信息',
      topic:'大屏预览'
    }
  },
  computed:{
    ...mapState('shuffling',['shufflings','total'])
  },
  methods:{
    ...mapActions('shuffling',['findAllShuffling','saveShuffling','deleteShuffling']),
    //分页
    changeHandler(page){
      this.list.page = page
      this.findAllShuffling(this.list)
    },
    // 去添加轮播信息
    showHandler(){
        this.dialogFormVisible = true
        this.dialogVisible = true
    },
    // 提交保存
    submitHandler(){
        this.saveShuffling(this.ruleForm).then(res=>{
            console.log(res,'///////////////////');
            if(res.status === 200){
            this.dialogFormVisible = false
            this.dialogVisible = false
            this.findAllCategory(this.list)
            this.$message({
                type: 'success',
                message:res.message
            })
            }else {
                this.$message({
                    type: 'error',
                    message:res.message
                })
            }
        })
    },
    //编辑轮播信息
    editHandler(data){
      // 将当前行的内容，赋值给我们的ruleForm
        this.ruleForm = data
        this.title = '编辑轮播信息'
      //打开模态框
        this.dialogFormVisible = true
        this.dialogVisible = true
    },
    //删除轮播信息
      deleteHandler(id){
        let params = {
          id
        }
        this.deleteShuffling(params).then(res =>{
          if(res.status === 200){
            this.findAllShuffling(this.list)
            this.$message({
              type:'success',
              message: res.message
            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
      }
  },
  created(){
    this.findAllShuffling(this.list)
  }
}
</script>
<style scoped>
/* .shuffling{
    float: left;
} */
</style>